<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue">
			<block slot="content">汤哥的商城</block>
		</cu-custom>
		<view class="main" :style="{'position':'fixed','top':this.CustomBar+'px','left':'0rpx','z-index':'1','width':'100%'} ">
			<view class="cu-bar bg-gradual-blue search search-block">
				<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big114004.jpg);"></view>
				<view class="search-form radius">
					<text class="cuIcon-search"></text>
					<input type="text" :adjust-position="false" placeholder="搜索商品" v-model="goodParams.query" confirm-type="search" ></input>
				</view>
				<view class="action">
					<button class="cu-btn round bg-blue" @click="search">搜索</button>
				</view>
			</view>
		</view>

		<view class="content"> 
			<view class="cu-card case">
				<view class="bg-white padding">
					<view class="grid margin-bottom text-center col-2 sm">
						<view class="padding-sm" v-for="(item,index) in goodList" :key="item.id">
							<navigator :url="'../detail/detail?'+'id='+item.id" open-type="navigate">
								<view class="padding radius text-center shadow-warp bg-white">
									<view>
										<image :src="imageSrc+item.image" mode="aspectFit"></image>
									</view>
									<view class="text-lg text-center">{{item.name}}</view>
									<view class="margin-top-sm text-Abc text-red">价格：{{item.price}}RMB </view>
								</view>
							</navigator>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				CustomBar: this.CustomBar + 'px',
				imageSrc: 'http://123.57.7.108:81/',
				goodParams: {
					pageNum: 1,
					pageSize: 10,
					query: ''
				},
				goodList: []
			}
		},
		onLoad() {
			this.init();
		},
		onPullDownRefresh() { //下拉刷新
			this.goodList = [];
			this.goodParams.pageNum = 1;
			this.init();
		},
		onReachBottom() { //上拉刷新
			this.goodParams.pageNum++;
			this.init();
		},
		methods: {
			search() {
				this.goodList = [];
				this.goodParams.pageNum = 1;
				this.init();
			},
			init() {
				uni.showLoading({
					title: '数据正在加载！'
				})
				this.$api.api_skus(this.goodParams)
					.then(res => {
						if (res.data.code === 200) {
							res.data.data.list.forEach(item => {
								this.goodList.push(item);
							})
							// this.goodList = res.data.data.list;
							uni.showLoading({
								title: '数据刷新成功！'
							})
							uni.showToast({
								title: '商品请求成功！'
							})
						}
					})
					.catch(error => {
						uni.showToast({
							title: error
						})
						uni.hideLoading();
						uni.showLoading({
							title: '数据正在加载！'
						})
					})
			}
		}
	}
</script>

<style>
	.content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	/* .search-block{
		position: fixed;
		top:100rpx;
		left:0;
	} */
</style>
